<template>
  <a-modal v-model:visible="visible" :title="modalTitle" width="35%" @ok="handleOk" @cancel="handleCancel">
    <a-form :model="formState" ref="formRef" :label-col="{ span: 5 }">
      <a-form-item label="名称" name="name" :rules="[{ required: true, message: '请输入名称' }]">
        <a-input v-model:value="formState.name" placeholder="请输入名称" />
      </a-form-item>
      <a-form-item label="等级" name="level" :rules="[{ required: true, message: '请输入等级' }]">
        <a-input-number v-model:value="formState.level" placeholder="请输入等级" style="width: 250px" />
      </a-form-item>
      <a-form-item label="最小区间" name="min_energy" :rules="[{ required: true, message: '请选择图片' }]">
        <a-input-number v-model:value="formState.min_energy" placeholder="请输入最小区间" style="width: 250px" />
      </a-form-item>
      <a-form-item label="最大区间" name="max_energy" :rules="[{ required: true, message: '请输入最大区间' }]">
        <a-input-number v-model:value="formState.max_energy" placeholder="请输入最大区间" style="width: 250px" />
      </a-form-item>
      <a-form-item label="区间比例" name="rate" :rules="[{ required: true, message: '请输入区间比例' }]">
        <a-input-number v-model:value="formState.rate" placeholder="请输入排序" style="width: 250px" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import useModal from "@/utils/useModal";
import { reactive, ref } from "vue";
import { message } from "ant-design-vue";
import { add, edit, info } from "@/api/energyLevel";
const { visible, modalTitle } = useModal();

const emits = defineEmits(["model-success"]);
const formRef = ref();

const formState = reactive({
  level_id: null,
  name: "",
  level: null,
  min_energy: null,
  max_energy: null,
  rate: null,
});
const show = (model) => {
  visible.value = true;
  modalTitle.value = model ? "编辑" : "新增";
  if (model && model.level_id) {
    getDetails(model);
  } else {
    resetForm({
      level_id: null
    })
  }
};
const getDetails = (data) => {
  info({
    id: data.level_id,
  }).then((res) => {
    if (res.code === 0) {
      const data = res.data;
      resetForm(data);
    }
  });
};
//设置表单的值
const resetForm = function (values) {
  for (var i in values) {
    formState[i] = values[i];
  }
};
// 保存
const handleOk = async () => {
  await formRef.value.validate().then(() => {
    const params = {
      ...formState,
    };
    if (formState.level_id) {
      edit({
        id: formState.level_id,
        ...params,
      }).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("model-success");
        }
      });
    } else {
      //添加
      add({ ...params }).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("model-success");
        }
      });
    }
  });
};
const handleCancel = () => {
  formRef.value.resetFields();
};
defineExpose({
  show,
});
</script>